<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
请输入城市:<input type="text" id="city">
<div id="hchart" style="width:450px; height:350px;"></div>
</body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script>
<script>
    $("#city").blur(function(){
        var city = $("#city").val();
        if(city==""){
            alert('不能为空');
        }else{
            $.ajax({
                url:"index.php",
                data:{city:city},
                dataType:"json",
                type:"post",
                success:function(res) {
                    var week = "";
                    var temp = "[";
                    $.each(res,function(i, v){
//                        console.log(v);
                        week += v.week + ",";
                        temp += "[" + v.temp_low + "," + v.temp_high + "],";
                    });

                    week = week.split(",");
                    temp += "]";
                    var chart = Highcharts.chart('hchart', {
                        chart: {
                            type: 'columnrange', // columnrange 依赖 highcharts-more.js
                            inverted: true
                        },
                        title: {
                            text: '每月温度变化范围'
                        },
                        subtitle: {
                            text: '2009 挪威某地'
                        },
                        xAxis: {
                            categories: week
                        },
                        yAxis: {
                            title: {
                                text: '温度 ( °C )'
                            }
                        },
                        tooltip: {
                            valueSuffix: '°C'
                        },
                        plotOptions: {
                            columnrange: {
                                dataLabels: {
                                    enabled: true,
                                    formatter: function () {
                                        return this.y + '°C';
                                    }
                                }
                            }
                        },
                        legend: {
                            enabled: false
                        },
                        series: [{
                            name: '温度',
                            data: eval(temp)
                        }]
                    });

                }
            });
        }
    });

</script>